<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>联通用户资费管理系统</title>

    <link href="stylesheets/css/styleLogin.css" rel="stylesheet">
    <link href="stylesheets/css/style-responsive.css" rel="stylesheet">
	<link href="JBox/jBox.css" rel="stylesheet" />
	<link href="JBox/plugins/Notice/jBox.Notice.css"  rel="stylesheet"/>
    <link href="JBox/plugins/Confirm/jBox.Confirm.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    
	<script src="javascripts/jquery-1.10.2.min.js"></script>
	<script src="javascripts/bootstrap.min.js"></script>
	<script src="javascripts/modernizr.min.js"></script>
	<script type="text/javascript" src="javascripts/jquery.cookie.js" ></script>
	<script type="text/javascript" src="JBox/jBox.js"></script>
	<script type="text/javascript" src="JBox/plugins/Notice/jBox.Notice.js"></script>
	<script>
		var uname,upwd;
		$(document).ready(function(){
			$(".btn-login").unbind("click").bind("click",function(){
				uname=$("#uname").val();
				upwd=$("#upwd").val();
				if($.trim(uname)==""||$.trim(uname)==null||$.trim(upwd)==""||$.trim(upwd)==null){
					new jBox('Notice', {width: 200,height: 45,content: '用户名或密码不能为空！',autoClose: 2000,
							color: 'red',animation: {open: 'slide:right',close: 'slide:top'},
							position: {x: ($(window).width()-200)/2,y: ($(window).height())/2}
					});
				}else{
					$.ajax({
	                type: "post",
	                dataType: "json",
	                contentType: "application/json",
	                url: "UnicomService.asmx/UserLogin",
	                cache: false,
	                data: JSON.stringify({ "uname": $("#uname").val(), "upwd": upwd}),
	                beforeSend: function () {
	                },
	                success: function (result) {
	                	if(result.d.ID!=0){                
							$.cookie("UM",result.d.ID);
							$.cookie("UMN",result.d.CNAME);
							$.cookie("UMC",result.d.CLERKNO);		                		
	                   		window.location="index.html";
	                	}
	                   	else{
	                   		new jBox('Notice', {width: 200,height: 45,content: '用户名或密码错误！',autoClose: 2000,
								color: 'red',animation: {open: 'slide:right',close: 'slide:top'},
								position: {x: ($(window).width()-200)/2,y: ($(window).height())/2}
							});
	                   		$("#uname").focus();
	                   	}
	                },
	                error: function (msg) { console.log(msg.responseText); }
	           		});					
				}
			});
		});
	</script>
</head>

<body class="login-body">
	<div class="container" style="margin-top: 7%;">
    <div class="form-signin">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">联通用户资费管理系统</h1>
            <img src="images/login-logo.png" alt=""/>
        </div>
        <div class="login-wrap">
            <input id="uname" type="text" class="form-control" placeholder="工号" autofocus>
            <input id="upwd" type="password" class="form-control" placeholder="密码">

            <button class="btn btn-lg btn-login btn-block" >登 录</button>

            <div class="registration">
                 &nbsp;
                <a class="" href="registration.html">
                 &nbsp;   
                </a>
            </div>
            <label class="checkbox">                
                <span class="pull-right">
                    <a data-toggle="modal" href="#myModal"> 忘记密码？联系管理员</a>

                </span>
            </label>

        </div>

        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background: #ff6100;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">忘记了密码?</h4>
                    </div>
                    <div class="modal-body">
                        <p>输入你的工号，点击发送以重置密码。</p>
                        <input type="text" name="email" placeholder="工号" autocomplete="off" class="form-control placeholder-no-fix">

                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                        <button class="btn btn-primary" type="button">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->

    </div>

</div>



<!-- Placed js at the end of the document so the pages load faster -->

<!-- Placed js at the end of the document so the pages load faster -->
</body>
</html>
